<template>
  <div class="FromGood">
    <el-form
      :model="goodFrom"
      :rules="ruleGood"
      ref="goodFrom"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="商品名称" prop="goodsName">
        <el-col :span="5">
          <el-input
            v-model="goodFrom.goodsName"
            placeholder="请输入产品名称"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="商品描述" prop="goodsDescription">
        <el-col :span="5">
          <el-input
            type="textarea"
            v-model="goodFrom.goodsDescription"
            placeholder="请输入"
          ></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="售卖类型" prop="goodsRemarkType">
        <el-col :span="5">
          <el-select
            style="width: 100%"
            v-model="goodFrom.goodsRemarkType"
            placeholder="请选择"
          >
            <el-option label="普通商品" :value="1"></el-option>
            <el-option label="月卡" :value="2"></el-option>
            <el-option label="会员" :value="3"></el-option>
            <el-option label="服务" :value="4"></el-option>
          </el-select>
        </el-col>
      </el-form-item>

      <el-form-item
        v-if="goodFrom.goodsRemarkType == 1"
        label="商品类型"
        prop="goodsType"
      >
        <el-select v-model="goodFrom.goodsType" placeholder="请选择">
          <el-option
            v-for="item in sortList"
            :key="item.id"
            :label="item.typeName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        v-if="goodFrom.goodsRemarkType == 1||goodFrom.goodsRemarkType == 4"
        label="库存"
        prop="stockNum"
      >
        <el-input-number
          v-model="goodFrom.stockNum"
          :step="1"
          :precision="0"
          :max="10000"
          :min="1"
        ></el-input-number>
      </el-form-item>
      <el-form-item
        v-if="goodFrom.goodsRemarkType != 1 && goodFrom.goodsRemarkType != 4"
        label="商品有效期(天)"
        prop="goodsVaildPeriod"
      >
        <el-input-number
          v-model="goodFrom.goodsVaildPeriod"
          :step="1"
          :precision="0"
          :max="10000"
          :min="1"
        ></el-input-number>
      </el-form-item>

      <el-form-item
        v-if="goodFrom.goodsRemarkType == 4"
        label="服务分钟数(分)"
        prop="minuteService"
      >
        <el-input-number
          v-model="goodFrom.minuteService"
          :step="1"
          :precision="0"
          :max="10000"
          :min="1"
        ></el-input-number>
      </el-form-item>

      <el-form-item label="成本价(元)" prop="costPrice">
        <el-input-number
          v-model="goodFrom.costPrice"
          :precision="2"
          :step="1"
          :max="10000"
          :min="1"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="售卖价(元)" prop="sellPrice">
        <el-input-number
          v-model="goodFrom.sellPrice"
          :precision="2"
          :step="1"
          :max="10000"
          :min="1"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="优惠价(元)" prop="discountPrice">
        <el-input-number
          v-model="goodFrom.discountPrice"
          :step="1"
          :precision="2"
          :max="goodFrom.sellPrice - 1"
          :min="0"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="商品状态" prop="goodsStatus">
        <el-col :span="5">
          <el-select
            style="width: 100%"
            v-model="goodFrom.goodsStatus"
            placeholder="请选择"
          >
            <el-option label="缺货" :value="0"></el-option>
            <el-option label="正常" :value="1"></el-option>
            <el-option label="下线" :value="2"></el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <!-- <el-form-item label="是否新品" prop="newGoods">
        <el-select v-model="goodFrom.newGoods" placeholder="请选择">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="商品图片" prop="goodsImage">
        <el-upload
          :action="uploadbaseurl + '/upload'"
          list-type="picture-card"
          multiple
          :limit="4"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="uploadSuccess"
          :file-list="fileList"
          :on-exceed="message"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('goodFrom')"
          >立即添加</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uploadbaseurl: null,
      goodFrom: {
        goodsName: null,
        goodsType: "",
        goodsImage: "",
        minuteService: 1,
        goodsRemarkType: 2,
        goodsSellType: 1,
        goodsVaildPeriod: 1,
        goodsDescription: "",
        costPrice: 1,
        sellPrice: 1,
        stockNum: 1,
        discountPrice: 1,
        goodsStatus: 0,
      },
      fileList: [],
      ruleGood: {},
      dialogImageUrl: "",
      dialogVisible: false,
      sortList: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.initData();
    this.uploadbaseurl = this.baseurl;
  },
  methods: {
    async initData() {
      let res = await this.http.post("/type/getGoodsTypeList");
      this.sortList = !res.error ? res.result : [];
    },
    async submitForm() {
      let req = {
        ...this.goodFrom,
      };
      if (req.goodsRemarkType != 1 && req.goodsRemarkType != 4) {
        delete req.stockNum;
        delete req.goodsType;
      } else if (req.goodsRemarkType == 4) {
        delete req.stockNum;
        delete req.goodsType;
        delete req.goodsVaildPeriod;
      } else {
        delete req.goodsVaildPeriod;
      }
      if (!req.goodsName) {
        this.eui.Message({
          message: "商品名称不能为空",
          type: "error",
        });
        return false;
      }
      let res = await this.http.post("/goods/addGoods", req);
      if (!res.error) {
        this.eui.Message({ message: "添加成功", type: "success" });
        this.goodFrom = {
          goodsName: null,
          goodsType: "",
          goodsImage: "",
          minuteService: 1,
          goodsRemarkType: 2,
          goodsSellType: 1,
          goodsVaildPeriod: 1,
          goodsDescription: "",
          costPrice: 1,
          sellPrice: 1,
          stockNum: 1,
          discountPrice: 1,
          goodsStatus: 0,
        };
      } else this.eui.Message({ message: "添加失败", type: "error" });
    },
    handleRemove(file, fileList) {
      this.goodFrom.goodsImage = this.dealFileList(fileList).join(",");
    },
    handlePictureCardPreview(file) {
      console.log(file.url);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    uploadSuccess(response, file, fileList) {
      this.goodFrom.goodsImage = this.dealFileList(fileList).join(",");
    },
    dealFileList(fileList) {
      var list = [];
      fileList.forEach((element) => {
        element.response.result.forEach((e) => {
          list.push(e);
        });
      });
      return list;
    },
    message(msg, type) {
      this.eui.Message({
        message: "超出上传个数，最多只能上传4张商品图片",
        type: "error",
      });
    },
  },
};
</script>

<style scoped>
.FromGood {
  width: 100%;
  min-height: 100%;
  padding: 15px;
  box-sizing: border-box;
}
</style>